<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理界面</title>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/bootstrap/css/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/>
    <script src="lib/echarts/echarts.js"></script>

    <link rel="stylesheet" href="css/management.css"/>
    <script src="js/management.js"></script>
</head>
<body>
<div id="title">
    <div id="ht">后台管理</div>
</div>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#order" data-toggle="tab">
            订单管理
        </a>
    </li>
    <li><a href="#food" data-toggle="tab">菜品管理</a></li>
    <li><a href="#data" data-toggle="tab">数据分析</a></li>
    <li><a href="#user" data-toggle="tab">用户管理</a></li>

</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="order">
        <div class="list-group">
            <button type="button" class="list-group-item " id="orderManage">订单管理</button>
            <!--<button type="button" class="list-group-item " id="new">未接订单</button>-->
            <button type="button" class="list-group-item" id="all">所有订单</button>
            <button type="button" class="list-group-item" id="final">已完成</button>
        </div>
        <div id="orderTabContent" class="tab-content">
            <!--<div class="tab-pane fade" id="newOrder">-->
                <!--<div class="zyk">-->
                    <!--<div class="x">X</div>-->
                    <!--<div id="yetOrdersIteminfo">-->
                        <!--&lt;!&ndash; Table &ndash;&gt;-->
                        <!--<table class="table table-hover yetOrdersItemTable">-->
                            <!--<thead>-->
                            <!--<tr>-->
                                <!--<th>菜品名称</th>-->
                                <!--<th>数量</th>-->
                                <!--<th>价格</th>-->
                            <!--</tr>-->
                            <!--</thead>-->
                            <!--<tbody>-->
                            <!--&lt;!&ndash;订单详情展示&ndash;&gt;-->

                            <!--</tbody>-->
                        <!--</table>-->
                    <!--</div>-->
                <!--</div>-->
                <!--<br/>-->
                <!--<div class="panel panel-default">-->
                    <!--<div class="panel-heading">-->
                        <!--未接订单-->
                    <!--</div>-->
                    <!--<div class="panel-body">-->
                        <!--&lt;!&ndash; Table &ndash;&gt;-->
                        <!--<table class="table table-hover yetOrdersTable">-->
                            <!--<thead>-->
                            <!--<tr>-->
                                <!--<th>订单号</th>-->
                                <!--<th>联系手机号</th>-->
                                <!--<th>用户</th>-->
                                <!--<th>订单金额</th>-->
                                <!--<th>配送地址</th>-->
                                <!--<th>下单时间</th>-->
                                <!--<th>订单状态</th>-->
                                <!--<th>查看订单详情</th>-->
                                <!--<th>操作</th>-->
                            <!--</tr>-->
                            <!--</thead>-->
                            <!--<tbody>-->
                            <!--&lt;!&ndash;订单详情展示&ndash;&gt;-->

                            <!--</tbody>-->
                        <!--</table>-->
                        <!--&lt;!&ndash;table结束&ndash;&gt;-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="tab-pane fade " id="allOrder">
                <div class="zyk">
                    <div class="x">X</div>
                    <div id="ordersIteminfo">
                        <!-- Table -->
                        <table class="table table-hover ordersItemTable">
                            <thead>
                            <tr>
                                <th>菜品名称</th>
                                <th>数量</th>
                                <th>价格</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--订单详情展示-->

                            </tbody>
                        </table>
                    </div>
                </div>
                <br/>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        所有订单
                    </div>
                    <div class="panel-body">
                        <!-- Table -->
                        <table class="table table-hover ordersTable">
                            <thead>
                            <tr>
                                <th>订单号</th>
                                <th>联系手机号</th>
                                <th>用户</th>
                                <th>订单金额</th>
                                <th>配送地址</th>
                                <th>下单时间</th>
                                <th>订单状态</th>
                                <th>查看订单详情</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--订单详情展示-->

                            </tbody>
                        </table>
                        <!--table结束-->
                    </div>
                </div>
            </div>
            <div class="tab-pane fade " id="finalOrder">
                <br/>
                <div class="zyk">
                    <div class="x">X</div>
                    <div id="finalOrdersIteminfo">
                        <!-- Table -->
                        <table class="table table-hover finalOrdersItemTable">
                            <thead>
                            <tr>
                                <th>菜品名称</th>
                                <th>数量</th>
                                <th>价格</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--订单详情展示-->

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        已完成订单
                    </div>
                    <div class="panel-body">
                        <!-- Table -->
                        <table class="table table-hover finalOrdersTable">
                            <thead>
                            <tr>
                                <th>订单号</th>
                                <th>联系手机号</th>
                                <th>用户</th>
                                <th>订单金额</th>
                                <th>配送地址</th>
                                <th>下单时间</th>
                                <th>订单状态</th>
                                <th>查看订单详情</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--订单详情展示-->

                            </tbody>
                        </table>
                        <!--table结束-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="food">
        <div class="list-group">
            <button type="button" class="list-group-item " id="foodManage">菜品管理</button>
            <button type="button" class="list-group-item " id="readFood">查看菜品</button>
            <button type="button" class="list-group-item" id="createFood">新增菜品</button>
            <button type="button" class="list-group-item" id="addType">新增种类</button>

        </div>
        <div id="foodTabContent" class="tab-content">
            <div class="tab-pane fade" id="rfood">
                <br/>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        菜品展示
                    </div>
                    <div class="panel-body">
                        <div id="searchBar">
                            <select name="foodType" input-lg id="searchType"></select>
                            <input type="text" id="searchFood" input-lg>
                            <button class="btn btn-info" id="searchbtn">查询</button>
                        </div>
                    </div>
                    <!-- Table -->
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>实拍</th>
                            <th>名称</th>
                            <th>种类</th>
                            <th>卡路里</th>
                            <th>价格</th>
                            <th>最后更新</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!--菜品展示-->

                        </tbody>

                        <!-- 模态框（Modal） -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            模态框（Modal）标题
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <form id="updateFrom" method="post" role="form">
                                            <div class="form-group">
                                                <label>菜品名称:</label>
                                                <input type="text" name="foodName" class="form-control" input-lg
                                                       id="modalName"/>
                                            </div>
                                            <div class="form-group">
                                                <label>菜品种类:</label>
                                                <select name="foodType" class="form-control" input-lg
                                                        id="modalType"></select>
                                            </div>
                                            <div class="form-group">
                                                <label>价格:</label>
                                                <input type="number" name="price" class="form-control" input-lg
                                                       id="modalPrice"/>
                                            </div>
                                            <div class="form-group">
                                                <label>卡路里:</label>
                                                <input type="number" name="calorie" class="form-control" input-lg
                                                       id="modalCalorie"/>
                                            </div>
                                            <div class="form-group">
                                                <label>简介:</label>
                                                <textarea name="remarks" placeholder="140字以内"
                                                          class="form-control" id="modalRemarks"></textarea>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                        </button>
                                        <button type="button" class="btn btn-primary" id="foodUpdate">
                                            提交更改
                                        </button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div>
                            <!-- /.modal -->
                    </table>


                </div>

            </div>
            <div class="tab-pane fade " id="cfood">
                <br/>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        新增菜品
                    </div>
                    <div class="panel-body">
                        <form id="uploadFrom" method="post" enctype="multipart/form-data" role="form">
                            <div class="form-group">
                                <label>菜品名称:</label>
                                <input type="text" name="foodName" id="foodName" class="form-control" input-lg/>
                            </div>
                            <div class="form-group">
                                <label>菜品种类:</label>
                                <select name="foodType" id="foodType" class="form-control" input-lg></select>
                            </div>
                            <div class="form-group">
                                <label>价格:</label>
                                <input type="number" name="price" id="price" class="form-control" input-lg/>
                            </div>
                            <div class="form-group">
                                <label>卡路里:</label>
                                <input type="number" name="calorie" id="calorie" class="form-control" input-lg/>
                            </div>
                            <div class="form-group">
                                <label>选择图片:</label>
                                <input type="file" name="file" id="file" class="form-control"/>
                            </div>
                            <div class="form-group">
                                <label>简介:</label>
                                <textarea name="remarks" id="remarks" placeholder="140字以内"
                                          class="form-control"></textarea>
                            </div>
                            <input type="submit" value="提交" id="sub" class="btn btn-info"/>
                        </form>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade " id="aType">
                <br/>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        新增菜品种类
                    </div>
                    <div class="panel-body">
                        <form id="uploadFrom2" method="post" role="form">
                            <div class="form-group">
                                <label>种类名称:</label>
                                <input type="text" name="typeName"  class="form-control" id="typeName"/>
                            </div>
                            <div class="form-group">
                                <label>描述:</label>
                                <textarea name="typeRemarks"  placeholder="140字以内"
                                          class="form-control" id="typeRemarks"></textarea>
                            </div>
                            <input type="submit" value="提交" id="sub2" class="btn btn-info"/>
                        </form>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <div class="tab-pane fade" id="data">
        <input type="button" class="btn btn-info" value="今年" id="thisyear"/>
        <input type="button" class="btn btn-success" value="去年" id="beforeyear"/>
        <input type="button" class="btn btn-info" value="本月" id="thismonth"/>
        <input type="button" class="btn btn-success" value="上月" id="beforemonth"/>
        <br/>
        <div class="list-group">
            <button type="button" class="list-group-item " id="dataManage">数据统计</button>
            <button type="button" class="list-group-item" id="sell">总计</button>
            <button type="button" class="list-group-item " id="topSell">TOP10</button>
            <button type="button" class="list-group-item" id="numSell">份数统计</button>
        </div>
            <!--图表界面-->
            <div id="dataTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="toSell">
                    <div id="total">
                        总计：<strong></strong>元
                    </div>
                    <div id="main">1</div>
                </div>

                <div class="tab-pane fade" id="tSell">
                    <div id="main2">2</div>
                </div>

                <div class="tab-pane fade" id="nSell">
                    <div id="numTotal">
                        总计：<strong></strong>份
                    </div>
                    <div id="main3">3</div>
                </div>

            </div>
            <!--数据显示结束-->

    </div>
    <div class="tab-pane fade" id="user">

            <br/>
            <div class="panel panel-default userPanel">
                <div class="zyk">
                    <div class="x">X</div>
                    <div id="userinfo">
                        <!-- Table -->
                        <table class="table table-hover userTable">
                            <tbody>
                            <tr>
                                <td>用户名</td><td><input type="text" id="name"/></td>
                            </tr>
                            <tr>
                                <td>密码</td><td><input type="text" id="pass"/></td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="button" class="btn btn-success up" value="提交"/>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="panel-heading">
                    用户管理
                </div>
                <div class="panel-body">
                    <div id="userSearchBar">
                        <input type="text" id="searchUser" input-lg>
                        <button class="btn btn-info" id="searchbtn2">查询</button>
                    </div>
                </div>
                <!-- Table -->
                <table class="table table-striped userInfoTable">
                    <thead>
                    <tr>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>密码</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--菜品展示-->

                    </tbody>
                 </table>
            </div>
    </div>
</div>
<!--数据显示结束-->
</body>
</html>